<template>
  <el-card shadow="hover" class="order-card" @click="JumpToDetail(orderNo)">
    <el-row :gutter="12">
      <!-- 左侧图片 -->
      <el-col :xs="8" :sm="8" :md="8">
        <ImageDisplay :src="img" img-width="100px" img-height="100px" />
      </el-col>

      <!-- 右侧信息 -->
      <el-col :xs="16" :sm="16" :md="16">
        <div class="info">
          <div>订单编号：{{ orderNo }}</div>
          <div>订单状态：{{ status }}</div>
          <div>下单时间：{{ orderTime }}</div>
          <div>商品数量：{{ quantity }}</div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import ImageDisplay from '@/components/ImageDisplay.vue'
import { useRouter } from 'vue-router'

interface Props {
  img: string
  orderNo: string
  status: string
  orderTime: string
  quantity: number
}
defineProps<Props>()

const router = useRouter()
const JumpToDetail = (orderNo: string) => {
  router.push({
    name: 'UserOrderDetail',
    query: { orderNo: orderNo }
  })
}
</script>

<style scoped>
.order-card {
  margin: 5px auto;
}

.info {
  font-size: 14px;
  line-height: 1.8;
}
</style>
